<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Testing</title>
        <script src="http://code.jquery.com/jquery-latest.min.js">
        </script>
        <script type="application/javascript">
            $(document).ready(function(){
                //                            var panel = document.getElementById("panel");
                //                            
                //                            var ctx = panel.getContext('2d');
                //                            //ctx.mozImageSmoothingEnabled = false;
                //                            var img = new Image();
                //                            
                //                            img.onload = function(){
                //                                ctx.drawImage(img, 0, 0);
                //                            };
                //                            img.src = "images/test1.png";
                //                            console.debug(img.width + " - " + img.height);
                //                            panel.width = img.width;
                //                            panel.height = img.height;	
                //            				$("#file").change(function(){
                //            					getSize(this.files);
                //            				});			
            });
            function getSize(files){
                // Loop through the FileList and render image files as thumbnails.
                for (var i = 0, f; f = files[i]; i++) {
                    // Only process image files.
                    if (!f.type.match('image.*')) {
                        continue;
                    }
                    
                    var reader = new FileReader();
                    
                    // Closure to capture the file information.
                    reader.onload = (function(theFile){
                        return function(e){
                            // Render thumbnail.
                            var span = document.createElement('span');
                            span.innerHTML = ['<img id="img" class="thumb" src="', e.target.result, '" title="', theFile.name, '"/>'].join('');
                            
                            //                            document.body.appendChild(span);
                            //                            //var img = span.getElementsById('img');
                            //							var img = document.createElement("img");
                            //							span.appendChild(img);
                            //                            img.onload = function(){
                            //                                //alert(img.src, img.offsetWidth, img.offsetHeight);
                            //								console.debug("debug: "+img.src+" " +img.offsetWidth+" "+img.offsetHeight);
                            //                                document.body.removeChild(span);
                            //                            }
                        
                        };
                    })(f);
                    
                    // Read in the image file as a data URL.
                    reader.readAsDataURL(f);
					
                }
            }
            
            
        </script>
    </head>
    <body>
        <p>
            <input type="file" id="files"/>
            <button onclick="getSize()">
                Load canvas
            </button>
        </p>
        <canvas id="panel">
        </canvas>
		<span id ='viewImage'>
			
		</span>
		<script type="application/javascript">
			// Loop through the FileList and render image files as thumbnails.
            function handleFileSelect(){
                var files = this.files; // FileList object
                // Loop through the FileList and render image files as thumbnails.
                for (var i = 0, f; f = files[i]; i++) {
                    // Only process image files.
                    if (!f.type.match('image.*')) {
                        continue;
                    }
                    
                    var reader = new FileReader();
                    
                    // Closure to capture the file information.
                    reader.onload = (function(theFile){
                        return function(e){
                            // Render thumbnail.
                            var span = document.getElementById("viewImage");                                                                                   
							var img = document.createElement("img");
							img.src = e.target.result;							                         
                            img.onload = function(){
                               alert("Debug: "+ img.offsetWidth +" "+ img.offsetHeight);
                               //document.body.removeChild(span);
                            }
							span.appendChild(img);   
                        };
                    })(f);
                    
                    // Read in the image file as a data URL.
                    reader.readAsDataURL(f);
                }
            }
            
            document.getElementById('files').addEventListener('change', handleFileSelect, false);
		</script>
    </body>
</html>
